
import React, {Component} from 'react';
import {StyleSheet, Text, View,
  Dimensions,
  TouchableOpacity,
  FlatList,
  Image
} from 'react-native';
import RefreshListView, {RefreshState} from 'react-native-refresh-list-view';
import TopBar from '../../bar/TopBar'
import BASEURL from '../../api/api'
import Loading from '../../common/Loading'
import Toast, {DURATION} from 'react-native-easy-toast'
var noMore = false;
var pageNo = 0;
var pageSize = 10;
var {height, width} = Dimensions.get('window');
export default class ApplyList extends Component {
  static navigationOptions = ({ navigation }) =>{
    return{
      headerTitle:<TopBar title='信息发送' rightTitle='新增' 
        page='applyAdd' navigation = {navigation}/>,
      headerLeft:null,
    }
  };
  constructor(props){
    super(props);
    this.state = ({
      data:[],
      loading:true,
    })
    //console.log(this.props)
  }
  componentWillMount(){
    this.fetchData(1);
  }
  onHeaderRefresh = () => {
  }
  onFooterRefresh = () => {
    if(noMore){
  		return;
  	}
  	pageNo++;
  	this.fetchData(pageNo);
    this.setState({refreshState: RefreshState.FooterRefreshing});
  }
  _addApply(){
    if(this.props.navigation){
      this.props.navigation.push('applyAdd')
    }
  }
  fetchData(page){
    //console.log('url',BASEURL+'getNoticeList')
    fetch(BASEURL+'getApplyList?pageNo='+page+'&pageSize='+pageSize)
    .then(res=>res.json())
    .then(result=>{
      //console.log('res',response)
      if(result.falg){
        // this.setState({
        //   data:response.applyList,
        //   loading:false,
        // })
        if(result.applyList.length<pageSize && pageNo != 1){
          noMore = true
          this.setState({
            data:this.state.data.concat(result.applyList),
            loading:false,
            refreshState: RefreshState.NoMoreData,
          })
        } else {
          this.setState({
            data:this.state.data.concat(result.applyList),
            loading:false,
            refreshState: RefreshState.Idle,
          })
        }
      } else {
        this.setState({
          loading:false,
          refreshState:RefreshState.Failure,
        })
        this.refs.toast.show('获取失败');
      }
    })
    .catch(err=>{
      this.setState({
        loading:false,
      })
      this.refs.toast.show('获取失败');
    })
  }
  _goDetail(item){
    if(this.props.navigation){
      this.props.navigation.push('applyDetail',{applyId:item.id})
    }
  }
  _separator = () => {
    return <View style={{height:10,backgroundColor:'#f0f0f0'}}/>;
  }
  _keyExtractor = (item, index) => index.toString();
  _renderItem = ({item,index}) =>{
    //console.log('item',item)
    var statusMap = {'0':'待审核','1':'已审核','2':'审核未通过','3':'草稿'}
    var status = item.status
    status = status?status:'-1'
    var status0Style = {borderColor:'#ffa600'}
    var status1Style = {borderColor:'#1caf25'}
    var status2Style = {borderColor:'#f00'}
    var status3Style = {borderColor:'#00f'}
    var status4Style = {borderWidth:0}

    var status0Text = {color:'#ffa600',}
    var status1Text = {color:'#1caf25'}
    var status2Text = {color:'#f00'}
    var status3Text = {color:'#00f'}
    var styleMap = {'-1':status4Style,'0':status0Style,'1':status1Style,'2':status2Style,'3':status3Style}
    var textMap = {'0':status0Text,'1':status1Text,'2':status2Text,'3':status3Text}
    var statuStyle = styleMap[status]
    return(
      <View  style={styles.row} >
        <TouchableOpacity style={styles.oneRow} activeOpacity={0.5} onPress={()=>this._goDetail(item)}>
          <View style={{flexDirection:'row',justifyContent:'flex-start',alignItems:'center'}}>
            <Image source={require('../../images/infosend-title-icon1.png')}></Image>
            <Text style={{marginLeft:5,color:'#333'}}>{item.hy_name}</Text>
            <View style={[styles.borderStyle,statuStyle]}><Text style={textMap[status]}>{statusMap[status]}</Text></View>
          </View>
          <Image source={require('../../images/arrow.png')}></Image>
        </TouchableOpacity>
        <View style={[styles.bottomView,styles.bottomBorder]}>
          <Text style={styles.bottomText}>申请原因</Text>
          <Text style={styles.bottomText}>{item.content}</Text>
        </View>
        <View style={styles.bottomView}>
          <Text style={styles.bottomText}>申请人</Text>
          <Text style={styles.bottomText}>{item.applicant}</Text>
        </View>
      </View>
    )
  }
  render(){
    if(this.state.loading){
      return <Loading />
    } else {
      return(
        <View style={{flex:1}}>
          <RefreshListView
            data={this.state.data}
            keyExtractor={this._keyExtractor}
            renderItem={this._renderItem}
            refreshState={this.state.refreshState}
            onHeaderRefresh={this.onHeaderRefresh}
            onFooterRefresh={this.onFooterRefresh}
            ItemSeparatorComponent={this._separator}
            // 可选
            footerRefreshingText= '数据加载中...'
            footerFailureText = '--数据加载失败--'
            footerNoMoreDataText= '--没有更多了--'
          />
          <Toast ref="toast" position='bottom' positionValue={200}/>
        </View>
      )
    }
    
  }

}
const styles = StyleSheet.create({
  borderStyle:{
    marginLeft:10,
    paddingLeft:10,
    paddingRight:10,
    borderWidth:1,
    borderRadius:10,
  },  
  oneRow:{
    padding:15,
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    borderBottomWidth:StyleSheet.hairlineWidth,
    borderBottomColor:'#aaa',
  },
  bottomBorder:{
    borderBottomWidth:StyleSheet.hairlineWidth,
    borderBottomColor:'#aaa',
  },  
  bottomText:{
    color:'#888',
    fontSize:14,
  },  
  bottomView:{
    paddingTop:15,
    paddingBottom:15,
    marginLeft:15,
    marginRight:15,
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    paddingTop:10,
  },  
})